<template>
  <div id="app">
    <ul class="order">
      <li :class="{'active':orderListIsActive}" @click="_orderListTitle">预订订单</li>
      <li :class="{'active':orderListHistoryIsActive}" @click="_queryOrderList">历史订单</li>
    </ul>
    <div class="balance" v-show="false">
      <p><span>可用余额</span><span>总预付款</span><span>货值增减</span></p>
      <p><span class="redColor">100000.00</span><span class="redColor">22000.00</span><span class="redColor">+507.00 / -507.00</span>
      </p>
    </div>
    <div class="no-order" v-show="isShowOrderIcon">
      <img src="../../../assets/images/no-order-icon.png" alt="">
      <router-link to="/" class="btnSmall">去逛逛</router-link>
    </div>
    <!--预订-->
    <div v-show="orderListIsActive">
      <a class="order-list" v-for="(item,index) in orderListData">
        <h1><em class="baseColor" :class="{'emActive':item.tradeDirection == 2}">{{item.tradeDirectionId}}</em> <span
          class="fr">订单号：{{item.tradeOrderNo}}</span></h1>
        <div class="order-list-box">
          <div>
            <img src="https://photo.kkgold.com/photoserver/images/3/2018/12/19/fd86b6e2-6285-47f2-ab98-b9c4c09c0908.jpg"
                 alt="">
          </div>
          <ul>
            <li>足金9999 发发金投资{{item.title}}条 {{item.tradeSpecification/item.tradeCount}}克</li>
            <li>规格：<em class="redColor">{{item.tradeSpecification/item.tradeCount}}g</em></li>
            <li><em>¥{{item.tradePrice/100}}/</em><em class="redColor">￥{{item.realPrice}}</em>
              <span class="fr">数量：x{{item.tradeCount}}</span></li>
            <li>货值增减：<em class="redColor" :class="{'emActive':item.valueRange<0}">{{item.valueRange}}</em></li>
          </ul>
        </div>
        <div class="service">预付款：¥{{item.tradePrincipal+item.tradeFee}}（含服务费）<a @click="_closeOrder(index)">退订</a>
          <!--<a>提货</a>--></div>
      </a>
    </div>
    <!--历史订单-->
    <div v-show="orderListHistoryIsActive">
      <a class="order-list" v-for="(item,index) in orderListHistoryData">
        <h1><em>已退订</em> <span class="fr">订单号：{{item.tradeOrderNo}}</span></h1>
        <div class="order-list-box">
          <div>
            <img src="https://photo.kkgold.com/photoserver/images/3/2018/12/19/fd86b6e2-6285-47f2-ab98-b9c4c09c0908.jpg"
                 alt="">
          </div>
          <ul>
            <li>足金9999 发发金投资{{item.title}}条{{item.tradeSpecification/item.tradeCount}}克</li>
            <li>规格：<em class="redColor">{{item.tradeSpecification/item.tradeCount}}g</em></li>
            <li><em>¥{{item.tradeNowPrice/100}} / </em><em class="redColor">¥{{item.tradePrice/100}}</em> <span
              class="fr">数量：x{{item.tradeCount}}</span></li>
            <li>货值增减：<em class="redColor" :class="{'emActive':item.tradeValue<0}">{{item.tradeValue/100}}</em>
              <span class="fr">{{item.tradeStatusId}}</span>
            </li>
          </ul>
        </div>
        <div class="service">预付款：¥{{item.tradePrincipal+item.tradeFee}}（含服务费）<router-link to="/">再次购买</router-link><!--<a>分享</a>--></div>
      </a>
    </div>
    <footers :navIndex="1"></footers>
  </div>
</template>
<script>
  import {localStorageGet} from '../../../assets/js/localStorage'
  import footers from '../../commonList/Footer.vue'
  export default {
    name: "order",
    components: {
      footers
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data() {
      return {
        orderShow: false,
        isShowOrderIcon:false,
        orderListData: [],
        orderListHistoryData: [],
        tradeOrderNo: '',
        tradeClosePrice: '',
        reserve: '',
        realPrice: {},
        valueRange: 0,
        title: '金',
        tradeDirectionId: '',
        tradeStatusId: '',
        orderListIsActive:true,
        orderListHistoryIsActive:false
      }
    },
    methods: {
      _orderListTitle() {
        this.$Indicator.open({
          spinnerType: 'fading-circle'
        });
        this.orderListIsActive = true
        this.orderListHistoryIsActive = false
        this.orderListData = []
        let _this = this
        let parames = {
          "tradeUserNo": localStorageGet('code'),
          "size": "10",
          "current": "0"
        }
        this.$http.post('/api/order/findHoldOrder', parames)
          .then(function (response) {
            _this.$Indicator.close()
            let data = response.data.data.list
            if(data.length == 0){
              _this.isShowOrderIcon = true
            }
            _this.orderListData = data
            for (var i = 0; i < _this.orderListData.length; i++) {
              _this.orderListData[i].tradePrice = _this.orderListData[i].tradePrice.toFixed(2)
              if (_this.orderListData[i].tradeDirection == 1) {
                _this.tradeDirectionId = '预购中'
              } else {
                _this.tradeDirectionId = '回购中'
              }
              if (_this.orderListData[i].tradeProNo == "AU") {
                _this.title = '金'
              } else {
                _this.title = '银'
              }
              _this.$set(_this.orderListData[i], 'title', _this.title)
              _this.$set(_this.orderListData[i], 'tradeDirectionId', _this.tradeDirectionId)
            }
          })
          .catch(function (error) {
            _this.$Indicator.close()
            console.log(error);
          });
      },
      _queryOrderList() {
        this.$Indicator.open({
          spinnerType: 'fading-circle'
        });
        this.orderListIsActive = false
        this.orderListHistoryIsActive = true
        this.orderListHistoryData = []
        let _this = this
        let parames = {
          "tradeUserNo": localStorageGet('code'),
          "size": "50",
          "current": "0"
        }
        this.$http.post('/api/order/findCloseOrder', parames)
          .then(function (response) {
            _this.$Indicator.close()
            let data = response.data.data.list
            _this.isShowOrderIcon = false
            if(data.length == 0){
              _this.isShowOrderIcon = true
            }
            _this.orderListHistoryData = data

            for (var i = 0; i < _this.orderListHistoryData.length; i++) {
              _this.orderListHistoryData[i].tradePrice = _this.orderListHistoryData[i].tradePrice.toFixed(2)
              if (_this.orderListHistoryData[i].tradeStatus == 1) {
                _this.tradeStatusId = '预定中'
              } else if (_this.orderListHistoryData[i].tradeStatus == 2) {
                _this.tradeStatusId = '手动平仓'
              } else if (_this.orderListHistoryData[i].tradeStatus == 3) {
                _this.tradeStatusId = '止盈'
              } else if (_this.orderListHistoryData[i].tradeStatus == 4) {
                _this.tradeStatusId = '止损'
              } else if (_this.orderListHistoryData[i].tradeStatus == 5) {
                _this.tradeStatusId = '系统平仓'
              } else {
                _this.tradeStatusId = '爆仓'
              }
              _this.$set(_this.orderListHistoryData[i], 'tradeStatusId', _this.tradeStatusId)

              if (_this.orderListHistoryData[i].tradeProNo == "AU") {
                _this.title = '金'
              } else {
                _this.title = '银'
              }
              _this.$set(_this.orderListHistoryData[i], 'title', _this.title)
            }
          })
          .catch(function (error) {
            _this.$Indicator.close()
            console.log(error);
          });
      },
      _closeOrder(i) {
        this.tradeOrderNo = this.orderListData[i].tradeOrderNo
        this.tradeClosePrice = this.orderListData[i].realPrice
        let parames = {
          tradeOrderNo: this.tradeOrderNo,
          tradeClosePrice: this.tradeClosePrice
        }
        let _this = this
        this.$http.post('/api/order/close', parames)
          .then(function (response) {
            if(response.data.rc == 200){
              _this.$Toast(response.data.msg)
            }
            _this._queryOrderList()
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      websocket() {
        const wsuri = "ws://192.168.1.150:8060/websocket/quote";
        this.websock = new WebSocket(wsuri);//这里面的this都指向vue
        this.websock.onopen = this.websocketopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        this.websock.onerror = this.websocketerror;
        if (this.orderListData == undefined) {
          this.websocketclose();
          // return
        }
      },
      websocketopen() {
        console.log("WebSocket连接成功")
      },
      websocketonmessage(e) {
        this.marketDta = e.data.split(",");
        for (var i = 0; i < this.orderListData.length; i++) {
          if (this.orderListData[i].tradeProNo == this.marketDta[4]) {
            this.$set(this.orderListData[i], 'realPrice', this.marketDta[5])
          }
          this.valueRange = (this.orderListData[i].realPrice - (this.orderListData[i].tradePrice / 100)) * this.orderListData[i].tradeSpecification
          this.valueRange = this.valueRange.toFixed(2)
          if (this.orderListData[i].tradeDirection == 2) {
            this.valueRange = -this.valueRange
          }
          this.$set(this.orderListData[i], 'valueRange', this.valueRange)
        }
      },
      websocketclose() {
        console.log("WebSocket关闭");
      },
      websocketerror() {
        console.log("WebSocket连接失败");
      }
    },
    created() {
      this._orderListTitle()
      this.websocket()
    }
  }
</script>

<style lang="less" scoped>
  #app {
    .order {
      display: flex;
      border-bottom: 1px solid #dcdcdc;
      li {
        flex: 1;
        text-align: center;
        font-size: 0.554rem;
        line-height: 1.92rem;
        background: #fff;
        &:last-child {
          border-left: 1px solid #dcdcdc;
        }
        &.active {
          color: #ff9500;
          border-bottom: 1px solid #ff9500;
        }
      }
    }
    .balance {
      padding: 0.5rem 0;
      border-top: 1px solid #dcdcdc;
      p {
        display: flex;
        &:nth-of-type(1) {
          color: #737373;
          margin-bottom: 0.2rem;
        }
        span {
          flex: 1;
          text-align: center;
          font-size: 0.426rem;
        }
      }
    }
    .no-order {
      img {
        width: 7rem;
        margin: 2rem auto;
        a {

        }
      }
    }
    .order-list {
      display: block;
      background: #fff;
      margin-top: 0.5rem;
      border-top: 1px solid #dcdcdc;
      h1 {
        line-height: 1.92rem;
        font-size: 0.512rem;
        font-weight: normal;
        padding: 0 0.5rem;
        border-bottom: 1px solid #dcdcdc;
        span {
          font-size: 0.426rem;
        }
      }
      .order-list-box {
        display: flex;
        padding-top: 0.4rem;
        border-bottom: 1px solid #dcdcdc;
        div {
          flex: 3;
          padding: 0.5rem;
        }
        ul {
          flex: 7;
          padding-right: 0.5rem;
          li {
            font-size: 0.469rem;
            line-height: 1.3rem;
            &:nth-of-type(1) {
              font-size: 0.554rem;
            }
          }
        }
      }
    }
    .service {
      font-size: 0.469rem;
      padding: 0 0.5rem;
      line-height: 1.92rem;
      border-bottom: 1px solid #dcdcdc;
      a {
        float: right;
        width: 3rem;
        text-align: center;
        line-height: 1.17rem;
        border: 1px solid #000;
        border-radius: 25px;
        margin: 0.35rem 0 0 0.5rem;
        color: #000;
      }
    }
    em.emActive {
      color: #44db5e !important;
    }
  }
</style>
